<script setup>
import { getCurrentInstance } from 'vue'
import FanSticky from '..'
import Button from '../../button/button.vue'

import { getElementNodes } from '../../utils'
const _this = getCurrentInstance()
const container = () => getElementNodes('#fanStickyDemoContainer', { scope: _this })
</script>

<template>
	<main style="height: 300vh; background: linear-gradient(to bottom, #fff, #999)">
		<demo-block title="基础用法">
			<FanSticky>
				<Button>按钮一枚</Button>
			</FanSticky>
		</demo-block>

		<FanSticky :offset-top="40">
			<demo-block title="吸顶距离" style="padding-left: 120px">
				<Button>按钮一枚</Button>
			</demo-block>
		</FanSticky>

		<demo-block title="指定容器" style="padding-left: 240px">
			<div id="fanStickyDemoContainer" style="width: 120px; height: 200px; border: 1px solid red">
				<div style="height: 20px"></div>
				<FanSticky :container="container">
					<Button>按钮一枚</Button>
				</FanSticky>
			</div>
		</demo-block>
	</main>
</template>
